<template>
  <div class="category">
    <Head></Head>
    <div class="cate_container">
      <SymptomBtns></SymptomBtns>
      <div class="search">
        <div class="seaechBtn"><span> 请输入症状名称</span></div>
      </div>
      <div class="sym_category">
        <div class="sidebar">
          <div
            v-for="(category, index) in bodyCategories"
            :key="index"
            :class="{ active: selectedCategory.id === category.id }"
            @click="slectCategory(category)"
          >
            {{ category.partsName }}
          </div>
        </div>
        <div class="content">
          <div
            class="sub-sidebar"
            v-if="selectedCategory && selectedCategory.partsName == '头部'"
          >
            <div
              v-for="(subCate, index) in subBodyList"
              :key="index"
              @click="selectSubCategory(subCate)"
              :class="{
                active:
                  selectedSubCategory && selectedSubCategory.id === subCate.id,
              }"
            >
              {{ subCate.partsName }}
            </div>
          </div>
          <div
            class="symptom-list-container"
            v-show="selectedCategory.partsName == '头部'"
          >
            <div
              v-show="selectedSubCategory"
              v-for="(symItem, idx) in symptomList"
              @click="selectSymptom(symItem)"
              :class="{
                active: selectedSymptom && selectedSymptom.id === symItem.id,
              }"
              :key="idx"
            >
              <span>{{ symItem.symptomName }}</span>
              <span class="arrow">
                <SvgIcon name="right" width="60px" height="60px"></SvgIcon>
              </span>
            </div>
          </div>
        </div>
        <!--非头部 点击一级 直接显示三级症状  -->
        <div
          v-if="selectedCategory && selectedCategory.partsName !== '头部'"
          class="sympelse-list-container"
        >
          <div
            v-for="(item, idx) in symptomList"
            :key="idx"
            class="item"
            @click="selectSymptom(item)"
            :class="{
              active: selectedSymptom && selectedSymptom.id === item.id,
            }"
          >
            <span>{{ item.symptomName }}</span>
            <span class="arrow">
              <SvgIcon name="right" width="60px" height="60px"></SvgIcon
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, onUnmounted, reactive } from "vue";
import { useRouter } from "vue-router";
import type { categoryItem, symptomItem } from "../type";
import {
  getBodyCategoryListApi,
  getSubBodyListApi,
  getSymptomListApi,
} from "@/api/symptom";
import { useRoute } from "vue-router";
const route = useRoute();

const router = useRouter();
const sex = route.query.sex;
const selectPart = route.query.part;
const bodyCategories = ref<categoryItem[]>([]);
//选择的一级分类
const selectedCategory = ref<categoryItem>({
  id: "",
  parentId: "",
  partsName: "",
});
//选择的二级分类
const selectedSubCategory = reactive<categoryItem>({
  id: "0d89497d6893bf14829",
  parentId: "",
  partsName: "",
});

const subBodyList = ref<categoryItem[]>([]);

//症状列表
const symptomList = ref<symptomItem[]>([]);
const selectedSymptom = reactive<symptomItem>({
  partsId: "",

  id: "",

  symptomName: "",
});
onMounted(async () => {
  await getBodyCategoryList();
  //默认显示头部
  /*  if (bodyCategories.value.length > 0) {
    console.log(bodyCategories.value[0], "000");
    selectedCategory.value = bodyCategories.value[0];
    await slectCategory(bodyCategories.value[0]);
    await getSymptomList();
  } */
  if (selectPart) {
    console.log(selectPart, "0001111");
    const foundItem = bodyCategories.value.find(
      (item) => item.partsName == selectPart
    );
    if (foundItem) {
      await slectCategory(foundItem);
      await getSymptomList();
    }
  }
});
//选择一级分类 只有头部有二级分类  其他的只有病症  即三级分类
const slectCategory = async (item: categoryItem) => {
  selectedCategory.value = item;
  selectedCategory.value.id = item.id;
  if (item.partsName == "头部") {
    const { result } = await getSubBodyListApi(selectedCategory.value.id);

    subBodyList.value = result;
  } else {
    //非头部 直接获取症状 根据选择的一级id

    getSymptomList();
  }
};
const selectSubCategory = (item: categoryItem) => {
  selectedSubCategory.id = item.id;
  getSymptomList();
};
const selectSymptom = (item: symptomItem) => {
  console.log("选择的症状", item);
  selectedSymptom.id = item.id;
  router.push({
    path: "/symReult",
    query: {
      departmentName: item.departmentName,
      symptomName: item.symptomName,
    },
  });
};
//获取症状列表
const getSymptomList = async () => {
  console.log(selectedCategory.value.partsName, "当前选择一级为");
  if (selectedCategory.value.partsName == "头部") {
    //根据二级分类id获取症状列表

    const { result } = await getSymptomListApi(sex, selectedSubCategory.id);
    symptomList.value = result;
  } else {
    //非头部 根据一级分类id获取症状列表

    const { result } = await getSymptomListApi(sex, selectedCategory.value.id);
    symptomList.value = result;
  }
};

const getBodyCategoryList = async () => {
  const { result } = await getBodyCategoryListApi(sex);

  bodyCategories.value = result;
};
</script>

<style scoped lang="scss">
@import "@/styles/mixins.scss";
.category {
  @include container;
  display: flex;
  flex-direction: column;
  // display: flex;
  .cate_container {
    flex: 1;

    .search {
      width: 100%;
      height: 224px;
      border-top: 1px solid #007bff;

      display: flex;
      align-items: center;
      justify-content: center;

      .seaechBtn {
        width: 92%;
        height: 120px;
        border-radius: 60px;
        overflow: hidden;
        // padding-top: 40px;
        background: linear-gradient(to right, #c2f0fd, #92d2fb);
        span {
          color: #5995bb;
          font-size: 40px;
          margin-left: 30px;
          line-height: 6vh;
        }
      }
    }
    .sym_category {
      // background-color: pink;
      height: calc(100% - 352px);

      .sidebar {
        width: 300px;
        height: 75vh;
        overflow-y: auto;
        background-color: #f0f0f0;
        div {
          width: 100%;
          height: 96px;
          font-size: 36px;
          color: #000000;
          font-weight: 500;
          text-align: center;
          line-height: 80px;
        }
      }
    }
  }
}

.sidebar .active {
  background-color: #007bff;
  color: white;
}

.content {
  width: 80%;
  background-color: #e0f7fa;
  //display: flex;
}
//二级分类
.sub-sidebar {
  width: 260px;
  background-color: #d0e9f2;
  position: fixed;
  top: 25.25vh;
  left: 300px;
  height: fit-content;
  div {
    width: 300px;
    height: 128px;

    font-size: 36px;

    color: #707070;
    background-color: #ffffff;
    line-height: 128px;
    padding-left: 5vw;
    &.active {
      background-color: #bee5ff;
    }
  }
}

.symptom-list-container {
  //padding: 10px;
  @include symptom_list_container;
  position: fixed;
  top: 25.25vh;
  right: 0;

  div {
    @include symptom_div;
    position: relative;

    .arrow {
      position: absolute;
      right: 20px;
      color: #ccc;
    }
    &.active {
      background-color: #bee5ff;
    }
  }
}

.sympelse-list-container {
  @include symptom_list_container;
  width: 779px;
  position: fixed;
  top: 25.25vh;
  left: 300px;
  div {
    @include symptom_div;
    position: relative;

    .arrow {
      position: absolute;
      right: 20px;
      color: #ccc;
    }
    &.active {
      background-color: #bee5ff;
    }
  }
}
</style>
